// 将界面调整为透明
body[data-mode="view"] .ui-layout-east
.markdown-body .highlight pre
.ace-tomorrow-night-eighties
.ace-tomorrow-night-eighties .ace_gutter
.markdown-body pre
    background transparent

// 重置滚动条
::-webkit-scrollbar
    width 10px

    .toc&
        width 5px

::-webkit-scrollbar-thumb
    background rgba(0, 0, 0, .3)
    border-radius 3px


// 右侧 Markdown 阅读器
.markdown-body
    // 加大宽度
    max-width fit-content

    // 全局文本颜色
    color #abb2bf

    // 标题和加粗文字单独弄颜色
    for i in 1 2 3 4 5 6
        h{i}
            color #d9d9d9
    strong
        color #d9d9d9

    // 链接颜色
    a
        color #6699CC;

    // 调整二级标题分隔线（border-bottom）的颜色
    h2
        border-color #6a737d

    // 重置行内代码（包括链接）的边距
    code
        padding 0

    // 调整行内（除链接和代码段）代码的颜色
    :not(pre):not(a) > code
        color darkseagreen

    // 引用
    blockquote
        border-color rgba(0, 0, 0, .2)

        // 引用里的标题
        strong
            color #797979

    // 代码段的边框
    pre
        border .5px solid #6a737d
        border-radius 0 3px 3px 3px
        margin-top 35px

        // 显示代码语言
        &::before
            content attr(language)
            position absolute
            transform translate(-16.5px, -34px)
            border-radius 3px 3px 0 0
            padding 0 10px

            for position in top left right
                border-{position} .5px solid #6a737d

    // 表格
    table

        // 边框
        tr
        th
        td
            border .5px solid #6a737d

        // 斑马纹背景色
        tr
            background-color transparent

        & thead tr
        tr:nth-child(2n)
            background-color rgba(0, 0, 0, .3)

    // 为浏览模式做布局优化
    [data-mode="view"] &

        // 重置默认规则，让其左对齐，右侧留给目录
        margin unset
        margin-right 420px
        padding-left 40px

        // 目录移到边上
        .toc
            font-size 12px
            position fixed
            right 50px
            width 400px
            max-height calc(100% - 70px)
            overflow-y auto
            list-style none

            a
                transition color .15s

            // 当前链接高亮
            a.active
                color lightgreen


// 编辑模式
body[data-mode="edit"]

    // 右侧切换（展开 / 收起预览界面）的条
    #east-toggler
        background: rgba(0, 0, 0, .3)

    // 上方切换（展开 / 收起快速插入）的条
    #north-toggler
        display none

    // 隐藏上方快速插入工具栏
    .ui-layout-north
        display none

    // 左侧编辑器
    .ace-tomorrow-night-eighties

        // 选中的块
        .ace_marker-layer .ace_selection
            background rgba(0, 0, 0, .4)

        // 行号
        .ace_gutter
            color rgba(171, 178, 191, .65)

        // 光标当前所在的行
        .ace_marker-layer .ace_active-line
        .ace_gutter-active-line
            background rgba(255, 255, 255, .05)
